<template>
  <view class="page">
    <view
      class="wrap"
      :style="{
        background: 'url(' + villageBg + ')' + ' center center',
      }"
    >
      <view
        class="cloud"
        :style="{
          background: 'url(' + cloud + ')' + 'no-repeat center center',
        }"
      ></view>
      <view
        class="cloudsmal"
        :style="{
          background: 'url(' + cloud1 + ')' + 'no-repeat center center',
        }"
      ></view>
      <view
        class="search flex"
        :style="{ top: menuButtonInfoBottom + 10 + 'px' }"
        @click="searchInfo"
      >
        <icon type="search" color="#B0B3BF" size="16" class="ml-1 mt-1" />
        <span class="pl-1">{{ $t('village.village') }}</span>
      </view>
      <view class="banner" :style="{ top: menuButtonInfoBottom + 50 + 'px' }">
        <swiper
          class="banner-swiper"
          :circular="true"
          :indicator-dots="false"
          :autoplay="true"
          :interval="5000"
          :duration="500"
          @change="onSwiperChange"
        >
          <swiper-item
            class="banner-swiper-item"
            v-for="(banner, idx) in banners"
            :key="idx"
            @click="onBannerTap(banner)"
          >
            <image :src="banner.pic" class="banner-image" mode="aspectFill"></image>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="noticeTip flex">
      <uni-icons type="sound" size="24" color="rgb(18, 240, 18)" class="ml-1"></uni-icons>
      <text class="notictxt" @click="headlines">龙潭头条</text>
      <swiper
        class="noticeBar"
        circular="true"
        vertical="true"
        autoplay="true"
        interval="3000"
        duration="1000"
      >
        <swiper-item v-for="(item, index) in noticeList" :key="index">
          {{ item }}
        </swiper-item>
      </swiper>
    </view>
    <view class="container-wrap">
      <view class="content-wrap area-wrap">
        <view class="content-title flex v-center h-s-b mb-1">
          <view>本地特色</view>
          <view class="content-title-extra flex v-center" @click="onMoreAreaTap">
            <u-icon name="arrow-right" size="14px"></u-icon>
          </view>
        </view>
        <scroll-view :scroll-x="true" class="area-list">
          <view class="area-list-inner">
            <view
              v-for="(item, index) in motionList"
              :key="index"
              class="flex v-center h-center flex-item-keep-style area-item"
              @click="onSportItemTap(item.name, item.id)"
            >
              <image class="area-item-background-image" mode="aspectFill" :src="item.pic"></image>
              <view class="area-item-inner flex flex-column h-center v-center">
                {{ item.name }}
              </view>
            </view>
            <view class="area-item-last">0</view>
          </view>
        </scroll-view>
      </view>

      <view class="content-wrap circle-wrap">
        <view class="content-title flex v-center h-s-b mb-1">
          <view>最新消息</view>
          <view class="content-title-extra flex v-center" @click="onMoreCircleTap">
            <u-icon name="arrow-right" size="14px"></u-icon>
          </view>
        </view>
        <view class="circle-list">
          <!-- <circle-list-item v-for="n in 1" :key="n" /> -->
        </view>
      </view>
    </view>

    <view class="footer flex v-center h-center flex-column">
      <view>到底啦</view>
    </view>
    <myTabbar :current="0"></myTabbar>
  </view>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue';
  // import CircleListItem from '@/components/CircleListItem/index.vue';
  import { imagesConfig } from '@/config/images.config';
  import { http } from '@/utils/request';
  import indexConfig from '@/config/index.config';
  import { useI18n } from '@/locales/useI18n';
  // import { useI18n } from 'vue-i18n';
  export default defineComponent({
    name: 'Index',
    // components: { CircleListItem },
    setup() {
      const $t: any = useI18n();
      const noticeList = ['noticeText', '234'];
      const navStyle: any = {};
      const { villageBg, cloud, cloud1 } = imagesConfig;
      const { imgUrl } = indexConfig;
      const picUrl = imgUrl + 'banner.jpeg';
      const produceUrl = imgUrl + 'produce.jfif';
      const courtyardUrl = imgUrl + 'courtyard.jpeg';
      const homestayUrl = imgUrl + 'homestay.jpg';
      const croplandUrl = imgUrl + 'cropland.jfif';
      const yogaUrl = imgUrl + 'yoga.jfif';
      const studyUrl = imgUrl + 'study.jfif';
      const readUrl = imgUrl + 'read.jfif';
      const banners = [
        {
          id: 0,
          pic: picUrl,
          type: 'SELF',
        },
        {
          id: 1,
          pic: picUrl,
          type: 'SELF',
        },
      ];
      const bannerCurrent = ref<number>(0);
      const motionList = [
        {
          id: 1,
          name: '农产品',
          pic: produceUrl,
        },
        {
          id: 2,
          name: '乡村院落',
          pic: courtyardUrl,
        },
        {
          id: 3,
          name: '山脚民宿',
          pic: homestayUrl,
        },
        {
          id: 4,
          name: '领养农田',
          pic: croplandUrl,
        },
        {
          id: 5,
          name: '禅修瑜伽',
          pic: yogaUrl,
        },
        {
          id: 6,
          name: '亲子研学',
          pic: studyUrl,
        },
        {
          id: 7,
          name: '乡村儿童阅读',
          pic: readUrl,
        },
      ];
      // 胶囊信息
      const menuButtonInfo: any = uni.getMenuButtonBoundingClientRect();
      const menuButtonInfoBottom = menuButtonInfo.bottom;
      // 系统信息
      uni.getSystemInfo({
        success: (res: any) => {
          navStyle.value = res;
        },
      });

      onMounted(async () => {
        // 状态栏高度
        // const statusBarHeight = navStyle.value.statusBarHeight;
        // 导航栏高度
        // const navHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height;
        // 胶囊高度
        // const tabBarHeight = menuButtonInfo.height;
        try {
          const res: any = await http.get('admin/user/page', {});
          console.log(1, res);
        } catch (error) {
          // console.log(2222, error);
        }
      });
      // 搜索
      function searchInfo() {
        uni.navigateTo({
          url: '/subPackages/pages/village/search',
          success(result) {
            console.log(result);
          },
          fail: function (error) {
            console.log('跳转失败', error);
          },
          // complete: function () {
          //   console.log('成功、失败都会执行');
          // },
        });
      }
      // 头条
      function headlines() {
        uni.navigateTo({
          url: '/subPackages/pages/village/headlines',
          success(result) {
            console.log(result);
          },
          fail: function (error) {
            console.log('跳转失败', error);
          },
          // complete: function () {
          //   console.log('成功、失败都会执行');
          // },
        });
      }
      function onSwiperChange(event: any) {
        bannerCurrent.value = event.detail.current;
      }
      function onBannerTap({ url_id }: any) {
        if (!url_id) return false;
        if (url_id.indexOf('https://') > -1) {
          // util.openWeb(url_id);
        } else {
          // this.$wxrouter.push(url_id);
        }
      }
      function onSportItemTap(name: string, id: number) {
        console.log(name, id);
        // this.$wxrouter.push('/packageSports/pages/' + id + '?name=' + name + '&id=' + id);
        uni.navigateTo({
          url: '/subPackages/pages/village/water',
          success(result) {
            console.log(result);
          },
          fail: function (error) {
            console.log('跳转失败', error);
          },
          complete: function () {
            console.log('成功、失败都会执行');
          },
        });
      }
      function onMoreAreaTap() {}
      function onMoreCircleTap() {
        // uni.navigateTo({
        //   url: '/packageStudent/pages/circle',
        //   error(res: any) {
        //     console.log(res);
        //   },
        // });
      }

      return {
        $t,
        navStyle,
        banners,
        bannerCurrent,
        motionList,
        onSwiperChange,
        onBannerTap,
        onMoreAreaTap,
        onSportItemTap,
        onMoreCircleTap,
        menuButtonInfo,
        menuButtonInfoBottom,
        villageBg,
        cloud,
        cloud1,
        noticeList,
        searchInfo,
        headlines,
      };
    },
  });
</script>
<style lang="scss">
  .page {
    background: #ffffff;
    min-height: 100vh;
  }

  .wrap {
    position: relative;
    width: 100%;
    height: 350px;
    background-size: 100%;
    .cloud {
      position: absolute;
      right: 10px;
      top: 20px;
      animation: cloud 20s linear infinite;
      background-size: 100%;
      width: 120px;
      height: 80px;
    }
    .cloudsmal {
      position: absolute;
      right: 100px;
      top: 160px;
      animation: cloud1 20s linear infinite;
      background-size: 100%;
      width: 120px;
      height: 80px;
    }
    .search {
      position: absolute;
      left: 4%;
      z-index: 10;
      background: rgba(255, 255, 255, 0.5);
      width: 92%;
      height: 32px;
      line-height: 32px;
      border-radius: 30px;
      color: #b0b3bf;
      justify-content: left;
      .pl-1 {
        color: rgba(0, 0, 0, 0.5);
      }
    }
    .banner {
      position: absolute;
      left: 4%;
      width: 92%;
      height: 180px;
      border-radius: 8px;
      overflow: hidden;
      .banner-swiper {
        height: 100%;
      }
      .banner-swiper-item {
        height: 200px;
        .banner-image {
          display: block;
          height: 200px;
          width: 100%;
        }
      }
    }
  }
  @keyframes cloud {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-500%);
    }
  }
  @keyframes cloud1 {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-300%);
    }
  }
  .noticeTip {
    position: relative;
    top: -20px;
    width: 92%;
    left: 4%;
    height: 40px;
    line-height: 40px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 1);
    justify-content: left;
    border: 1px solid rgba(18, 240, 18, 0.8);
    .notictxt {
      margin-left: 10px;
      color: rgba(18, 240, 18, 0.8);
    }
    .noticeBar {
      flex: 1;
      height: 40px;
      line-height: 40px;
      padding-left: 10px;
      color: rgba(18, 240, 18, 1);
    }
  }

  .container-wrap {
    padding-top: 32rpx;
    position: relative;
    background: #fff;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    .search-wrap {
      padding: 0 24rpx;
      margin-bottom: 60rpx;
    }
    .content-wrap {
      margin-bottom: 60rpx;

      .content-title {
        font-size: 36rpx;
        font-family:
          PingFangSC-Medium,
          PingFang SC;
        font-weight: 500;
        color: $base-color;
        padding: 0 24rpx 0 36rpx;
        position: relative;
        &:before {
          position: absolute;
          left: 24rpx;
          top: 12rpx;
          display: block;
          content: '';
          width: 6rpx;
          height: 28rpx;
          background: $base-color;
        }

        .content-title-extra {
          font-size: 24rpx;
          color: #767676;
        }
      }
      .area-list-inner {
        display: flex;
      }
    }
    .area-wrap {
      .area-list {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 24rpx;

        &::-webkit-scrollbar {
          width: 0;
          height: 0;
          color: transparent;
        }

        .area-item {
          width: 248rpx;
          height: 148rpx;
          border-radius: 16rpx;
          color: #4a4a4a;
          font-size: 26rpx;
          margin-right: 22rpx;
          position: relative;
          overflow: hidden;

          &:first-child {
            margin-left: 24rpx;
          }

          .area-item-background-image {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
          }

          .area-item-inner {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            font-size: 34rpx;
            font-family:
              PingFangSC-Medium,
              PingFang SC;
            font-weight: 500;
            color: #ffffff;
            margin: auto;
            background: rgba(0, 0, 0, 0.3);
          }
        }

        .area-item-last {
          height: 10rpx;
          width: 24rpx;
          color: #fff;
          margin-left: -18rpx;
        }
      }

      .product-container {
        margin-bottom: 24rpx;
      }
    }
    .circle-list {
      padding: 0 24rpx;
    }
  }

  .footer {
    font-size: 22rpx;
    color: #bbbbbb;
    line-height: 32rpx;
    margin-bottom: 100rpx;
  }
</style>
